<template>
  <div class="productDetail">
    <!-- 头部 -->
    <div>
      <div style="padding:30px 0 16px 15px" class="flex">
        <p class="classify">分类</p>
        <span class="name ellipsis">{{res.classifyName}}</span>
      </div>
      <p class="standard">业绩比较基准</p>
      <!-- <img src="/static/images/manage/detailBg.png" class="detailBg" alt /> -->
      <div class="detailBg" v-if="res.baseComparison">
        <div class="percent" v-if="res.baseComparison.length===1">
          <span v-if="res.baseComparison[0].prop==='0'">浮动</span>
          <span v-else>{{res.baseComparison[0].prop}}%</span>
        </div>
        <div class="percent" v-if="res.baseComparison.length>1">
          <span
            v-if="res.baseComparison[0].prop==='0' && res.baseComparison[res.baseComparison.length-1].prop==='0'"
          >浮动</span>
          <span
            v-else
          >{{res.baseComparison[0].prop}}%~{{res.baseComparison[res.baseComparison.length-1].prop}}%</span>
        </div>

        <!-- <div class="percent" v-if="res.baseComparison.length===1">{{res.baseComparison[0].prop}}%</div>
        <div
          class="percent"
          v-else
        >{{res.baseComparison[0].prop}}%~{{res.baseComparison[res.baseComparison.length-1].prop}}%</div>-->
        <div class="flex" style="margin-top: 16px;">
          <div class="safe flex">
            <img src="/static/images/manage/safe.png" alt />
            <span>{{res.productRiskLevel}}</span>
          </div>
          <div class="grade">{{res.startingAmount}}万元起投</div>
        </div>
      </div>
      <!-- /**基本信息 */ -->
      <div class="info">
        <div class="flex" style=" align-items: center;">
          <p class="incon"></p>
          <span class="basic">订单信息</span>
        </div>
        <div class="flex" style="margin-top:20px">
          <p class="infoLeft">产品状态</p>
          <!-- 产品状态：UNDER_AUDIT.审核中,WAIT_REST.待起息,ARRIVED_ACCOUNT.已到账,PASS_AUDIT.审核通过,REJECTED.已驳回,CLOSED.已关闭,COMPLETE.已完成	 -->
          <!-- 审核状态：PRE_ONLINE.预上线,TO_PERFECT.待完善,TO_AUDITED.待审核,CLOSE_ACCOUNT.封账,REMOVE_RACK.已下架,SET_UP.预成立,IN_COLLECTION
          * .回款中,COMPLETE.已完成-->
          <p
            class="flex-1 infoRight"
          >{{res.productAudit==='RAISING'?"募集中":(res.productAudit==='CLOSE_ACCOUNT'||res.productAudit==='SET_UP'||res.productAudit==='IN_COLLECTION')?"回款中":res.productAudit==='REMOVE_RACK'?"已下架":"已完成"}}</p>
        </div>
        <!-- <div class="flex" style="margin-top:20px">
          <p class="infoLeft">订单状态</p>
          <p class="flex-1 infoRight">XXXXX</p>
        </div>-->
        <div class="flex" style="margin-top:20px">
          <p class="infoLeft">起息日期</p>
          <p class="flex-1 infoRight">{{res.interestDay?res.interestDay:"—"}}</p>
        </div>
        <div class="flex" style="margin-top:20px">
          <p class="infoLeft">购买日期</p>
          <p class="flex-1 infoRight">{{res.purchaseDate?res.purchaseDate:"—"}}</p>
        </div>
        <div class="flex" style="margin-top:20px">
          <p class="infoLeft">到期日期</p>
          <p class="flex-1 infoRight">{{res.productExpireData?res.productExpireData:"—"}}</p>
        </div>
      </div>
      <!-- /**审核状态 */ -->
      <div class="gray"></div>
      <div class="type">
        <div class="info">
          <div class="flex" style=" align-items: center;">
            <p class="incon"></p>
            <span class="basic">审核状态</span>
          </div>
          <div class="flex" style="margin-top:20px">
            <p class="infoLeft">审核结果</p>
            <!-- 审核结果：PASS_AUDIT.审核通过,REJECTED.已驳回,CLOSED.已关闭,COMPLETE.已完成 其他的都是审核中	 -->
            <p
              class="flex-1 infoRight"
            >{{res.auditStatus==='PASS_AUDIT'?"审核通过":res.auditStatus==='REJECTED'?"已驳回":(res.auditStatus==='CLOSED'||res.auditStatus==='WAIT_REST')?"已关闭":res.auditStatus==='COMPLETE'?"已完成":"审核中"}}</p>
          </div>
          <div class="flex" style="margin-top:20px" v-if="userInfo.identity==='FINANCIAL'">
            <p class="infoLeft">备注</p>
            <p class="flex-1 infoRight">{{res.disReason?res.disReason:""}}</p>
          </div>
        </div>
      </div>
      <div class="more">
        <div
          class="table"
          v-if="res.productAudit==='CLOSE_ACCOUNT'||res.productAudit==='SET_UP'||res.productAudit==='IN_COLLECTION'||res.productAudit==='COMPLETE'"
        >
          <div class="thead flex">
            <div class="border_left">次数</div>
            <p class="border_center">预计兑付金额</p>
            <p style="width:146px;text-align:center;justify-content: center;" class="flex">
              <span style="margin-right:6px">实际兑付金额</span>
              <i class="iconfont icontishi" @click="show=true"></i>
            </p>
          </div>
          <!-- v-for="(item,index) in tableList"
          :key="index"-->
          <!-- 日期列表 -->
          <div>
            <!-- 1 -->
            <!-- v-if="res.predictAmountOne" -->
            <div class="thbody flex align-center" :style="{background:'#fff'}">
              <div class="border_left" style="line-height:54px">1</div>
              <div class="border_center">
                <p
                  class="num"
                >{{res.predictAmountOne!==null?(res.predictAmountOne!==0?res.predictAmountOne:"待定"):"—"}}</p>
                <p
                  class="date"
                >{{res.predictPaybackOne!==null?(res.predictPaybackOne!==0?res.predictPaybackOne:"待定"):"—"}}</p>
              </div>
              <div class="border_right">
                <p
                  class="num"
                >{{res.actualAmountOne!==null?(res.actualAmountOne!==0?res.actualAmountOne:"待定"):"—"}}</p>
                <p
                  class="date"
                >{{res.actualPaybackOne!==null?(res.actualPaybackOne!==0?res.actualPaybackOne:"待定"):"—"}}</p>
              </div>
            </div>
            <!-- 2 -->
            <div class="thbody flex align-center" :style="{background:'#F8FAFB'}">
              <div class="border_left" style="line-height:54px">2</div>
              <div class="border_center">
                <p
                  class="num"
                >{{res.predictAmountTwo!==null?(res.predictAmountTwo!==0?res.predictAmountTwo:"待定"):"—"}}</p>
                <p class="date">{{res.predictPaybackTwo?res.predictPaybackTwo:"—"}}</p>
              </div>
              <div class="border_right">
                <p
                  class="num"
                >{{res.actualAmountTwo!==null?(res.actualAmountTwo!==0?res.actualAmountTwo:"待定"):"—"}}</p>
                <p class="date">{{res.actualPaybackTwo?res.actualPaybackTwo:"—"}}</p>
              </div>
            </div>
            <!-- 3 -->
            <div
              class="thbody flex align-center"
              v-if="res.predictAmountThree"
              :style="{background:'#fff'}"
            >
              <div class="border_left" style="line-height:54px">3</div>
              <div class="border_center">
                <p class="num">{{res.predictAmountThree}}</p>
                <p class="date">{{res.predictPaybackThree}}</p>
              </div>
              <div class="border_right">
                <p class="num">{{res.actualAmountThree?res.actualAmountThree:"—"}}</p>
                <p class="date">{{res.actualPaybackThree?res.actualPaybackThree:"—"}}</p>
              </div>
            </div>
            <!-- 4 -->
            <div
              class="thbody flex align-center"
              v-if="res.predictAmountFour"
              :style="{background:'#F8FAFB'}"
            >
              <div class="border_left" style="line-height:54px">4</div>
              <div class="border_center">
                <p class="num">{{res.predictAmountFour?res.predictAmountFour:"—"}}</p>
                <p class="date">{{res.predictPaybackFour?res.predictPaybackFour:"—"}}</p>
              </div>
              <div class="border_right">
                <p class="num">{{res.actualAmountFour?res.actualAmountFour:"—"}}</p>
                <p class="date">{{res.actualPaybackFour?res.actualPaybackFour:"—"}}</p>
              </div>
            </div>
            <!-- 5 -->
            <div
              class="thbody flex align-center"
              v-if="res.predictAmountFive"
              :style="{background:'#fff'}"
            >
              <div class="border_left" style="line-height:54px">5</div>
              <div class="border_center">
                <p class="num">{{res.predictAmountFive?res.predictAmountFive:"—"}}</p>
                <p class="date">{{res.predictPaybackFive?res.predictPaybackFive:"—"}}</p>
              </div>
              <div class="border_right">
                <p class="num">{{res.actualAmountFive?res.actualAmountFive:"—"}}</p>
                <p class="date">{{res.actualPaybackFive?res.actualPaybackFive:"—"}}</p>
              </div>
            </div>
            <!-- 6 -->
            <div
              class="thbody flex align-center"
              v-if="res.predictAmountSix"
              :style="{background:'#F8FAFB'}"
            >
              <div class="border_left" style="line-height:54px">6</div>
              <div class="border_center">
                <p class="num">{{res.predictAmountSix?res.predictAmountSix:"—"}}</p>
                <p class="date">{{res.predictPaybackSix?res.predictPaybackSix:"—"}}</p>
              </div>
              <div class="border_right">
                <p class="num">{{res.actualAmountSix?res.actualAmountSix:"—"}}</p>
                <p class="date">{{res.actualPaybackSix?res.actualPaybackSix:"—"}}</p>
              </div>
            </div>
            <!-- 7 -->
            <div
              class="thbody flex align-center"
              v-if="res.predictAmountSeven"
              :style="{background:'#fff'}"
            >
              <div class="border_left" style="line-height:54px">7</div>
              <div class="border_center">
                <p class="num">{{res.predictAmountSeven}}</p>
                <p class="date">{{res.predictPaybackSeven}}</p>
              </div>
              <div class="border_right">
                <p class="num">{{res.actualAmountSeven?res.actualAmountSeven:"—"}}}</p>
                <p class="date">{{res.actualPaybackSeven?res.actualPaybackSeven:"—"}}}</p>
              </div>
            </div>
            <!-- 8 -->
            <div
              class="thbody flex align-center"
              v-if="res.predictAmountEight"
              :style="{background:'#F8FAFB'}"
            >
              <div class="border_left" style="line-height:54px">8</div>
              <div class="border_center">
                <p class="num">{{res.predictAmountEight}}</p>
                <p class="date">{{res.predictPaybackEight}}</p>
              </div>
              <div class="border_right">
                <p class="num">{{res.actualAmountEight?res.actualAmountEight:"—"}}</p>
                <p class="date">{{res.actualPaybackEight?res.actualPaybackEight:"—"}}</p>
              </div>
            </div>
            <!-- 9 -->
            <div
              class="thbody flex align-center"
              v-if="res.predictAmountNine"
              :style="{background:'#fff'}"
            >
              <div class="border_left" style="line-height:54px">9</div>
              <div class="border_center">
                <p class="num">{{res.predictAmountNine}}</p>
                <p class="date">{{res.predictPaybackNine}}</p>
              </div>
              <div class="border_right">
                <p class="num">{{res.actualAmountNine?res.actualAmountNine:"—"}}</p>
                <p class="date">{{res.actualPaybackNine?res.actualPaybackNine:"—"}}</p>
              </div>
            </div>
            <!-- 10 -->
            <div
              class="thbody flex align-center"
              v-if="res.predictAmountTen"
              :style="{background:'#F8FAFB'}"
            >
              <div class="border_left" style="line-height:54px">10</div>
              <div class="border_center">
                <p class="num">{{res.predictAmountTen}}</p>
                <p class="date">{{res.predictPaybackTen}}</p>
              </div>
              <div class="border_right">
                <p class="num">{{res.actualAmountTen}}</p>
                <p class="date">{{res.actualPaybackTen}}</p>
              </div>
            </div>
            <!-- 11 -->
            <div class="thbody flex align-center" :style="{background:'#F8FAFB'}">
              <div class="border_left" style="line-height:54px">本金</div>
              <div class="border_center">
                <p class="num">{{res.predictAmountBen?res.predictAmountBen:"—"}}</p>
                <p class="date">{{res.predictPaybackBen?res.predictPaybackBen:"—"}}</p>
              </div>
              <div class="border_right">
                <p class="num">{{res.actualAmountBen?res.actualAmountBen:"—"}}</p>
                <p class="date">{{res.actualPaybackBen?res.actualPaybackBen:"—"}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="moreProduct" @click="jumpClect">选择更多产品</div>
      </div>
      <div class="gray"></div>
      <div style="padding:0 15px 20px;">
        <!-- {{res.auditStatus==='PASS_AUDIT'?"审核通过":res.auditStatus==='REJECTED'?"已驳回":
        (res.auditStatus==='CLOSED'||res.auditStatus==='WAIT_REST')?"已关闭":res.auditStatus==='COMPLETE'?"已完成":"审核中"}}</p>-->
        <div style="padding-top:20px" v-if="!detailType">
          <div
            v-if="res.auditStatus!=='CLOSED'&&res.auditStatus!=='WAIT_REST'&&res.auditStatus!=='COMPLETE'&& res.auditStatus!=='REJECTED'&& res.auditStatus!=='PASS_AUDIT'"
          >
            <p class="infoLeft">上传附件</p>
            <div style="padding:20px 0 15px;border-bottom:0.5px solid #E6E6E6">
              <div class="flex-1 flex" style="flex-wrap:wrap">
                <div v-for="(item,index ) in imgList" :key="index" class="listImg">
                  <img style="width:60px;height:60px" :src="item" @click="previewImage(item)" alt />
                  <img
                    src="/static/images/user/delect_icon.png"
                    @click="deleteImg(index)"
                    alt
                    class="imgDelete"
                  />
                </div>
                <img @click="imageItem" class="upImg" src="/static/images/user/upImg.png" alt />
              </div>
            </div>
          </div>
          <div v-else>
            <p class="infoLeft flex">
              <span class="flex-1">上传附件</span>
              <span style="font-size:14px" v-if="imgList.length===0">暂无附件</span>
            </p>
            <div
              class="flex-1 flex"
              style="padding:20px 0 15px;border-bottom:0.5px solid #E6E6E6"
              v-if="imgList.length>0"
            >
              <div v-for="(item,index ) in imgList" :key="index" class="listImg">
                <img style="width:60px;height:60px" :src="item" @click="previewImage(item)" alt />
                <!-- <img
                  src="/static/images/user/delect_icon.png"
                  @click="deleteImg(index)"
                  alt
                  class="imgDelete"
                />-->
              </div>
              <!-- <img @click="imageItem" class="upImg" src="/static/images/user/upImg.png" alt /> -->
            </div>
          </div>
        </div>
        <div class="flex align-center" style="padding:20px 0 10px" @click="jump(2)">
          <p class="infoLeft flex-1">项目详情</p>
          <img src="/static/images/manage/right.png" style="width:10px;height:14px" alt />
        </div>
        <div
          class="flex"
          style="padding:10px 0 20px;border-bottom:0.5px solid #E6E6E6"
          @click="jumpPoster"
        >
          <p class="infoLeft flex-1">投资确认书</p>
          <img src="/static/images/manage/right.png" style="width:10px;height:14px" alt />
        </div>
      </div>
    </div>
    <div v-if="show" class="model">
      <div style="padding:0 48px">
        <div class="modelAlert">
          <div class="modelContent">
            <span>{{res.actualPayArr}}</span>
            <!-- <span style="color:#020604;margin:0 5px">7</span>
            <span>个工作日内到账</span>-->
          </div>
          <p class="btn" @click="show=false">知道了</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  apiGetOssPlicy,
  productOrderInfo,
  productOrderUpload,
  posterDetail
} from "@/api/api";
import { mapGetters } from "vuex";
import uploadImage from "@/utils/upload";
export default {
  data() {
    return {
      collect: false,
      detailType: null,
      show: false,
      imgList: [],
      id: null,
      tableList: [1, 2, 3],
      productId: null,
      sign: null,
      res: {
        baseComparison: [{ main: "", max: "", prop: "" }]
      }
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  mounted() {
    Object.assign(this.$data, this.$options.data());
    this.id = this.$mp.query.id;
    this.productId = this.$mp.query.productId ? this.$mp.query.productId : null;
    this.detailType = this.$mp.query.detailType
      ? this.$mp.query.detailType
      : null;
    if (!this.detailType) {
      this.apiGetOssPlicy();
    }
    this.productOrderInfo();
  },
  methods: {
    /** 详情 */
    async productOrderInfo() {
      await productOrderInfo({ id: this.id }).then(res => {
        this.res = res;
        this.imgList = res.attachment || [];
        this.productId = res.productId;
        wx.setNavigationBarTitle({
          title: res.name ? res.name : res.productName
        });
      });
    },
    jump(type) {
      wx.navigateTo({
        url: `/pages/money/children/richText/main?id=${
          this.productId
        }&type=${type}`
      });
    },
    /** 选择产品 */
    jumpClect() {
      wx.navigateTo({
        url: `/pages/PersonalCenter/userChildren/selsect/main?realId=${
          this.res.customerId
        }&customerName=${this.res.customerName}&phone=${this.res.employeePhone}`
      });
    },
    /** 投资确认书 */
    async jumpPoster() {
      /** 回款中，已完成 */
      if (this.res.auditStatus === "CLOSED") {
        wx.showToast({
          title: "当前订单已关闭，请联系理财师",
          icon: "none",
          duration: 2000
        });
      } else {
        if (
          this.res.productAudit === "CLOSE_ACCOUNT" ||
          this.res.productAudit === "SET_UP" ||
          this.res.productAudit === "COMPLETE" ||
          this.res.productAudit === "IN_COLLECTION"
        ) {
          await posterDetail({ id: this.id }).then(res => {
            if (res.investType === 1 && res.picImg) {
              wx.navigateTo({
                url:
                  "/pages/PersonalCenter/userChildren/poster/main?id=" + this.id
              });
            } else if (res.investType === 2 && res.picImg) {
              wx.navigateTo({
                url:
                  "/pages/PersonalCenter/userChildren/funds/main?id=" + this.id
              });
            } else {
              wx.showToast({
                title: "投资确认书请联系理财师",
                icon: "none",
                duration: 2000
              });
            }
          });
        } else {
          wx.showToast({
            title: "产品还未募集结束，请于待起息后查看！",
            icon: "none",
            duration: 2000
          });
        }
      }
    },
    /** 预览图片 */
    previewImage(item) {
      wx.previewImage({
        current: item, // 当前显示图片的http链接
        urls: this.imgList // 需要预览的图片http链接列表
      });
    },
    /** 删除图片 */
    deleteImg(index) {
      let that = this;
      wx.showModal({
        title: "提示",
        content: "确定删除这张照片吗？",
        confirmColor: "#1E7FFF",
        success(res) {
          if (res.confirm) {
            that.imgList.splice(index, 1);
            setTimeout(() => {
              that.productOrderUpload();
            }, 200);
            console.log("imgs-that:", that.imgList);
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        }
      });
    },
    async productOrderUpload() {
      await productOrderUpload({ id: this.id, attachment: this.imgList });
    },
    /** 获取oss凭证 */
    async apiGetOssPlicy() {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      const data = await apiGetOssPlicy();
      wx.hideLoading();
      if (data) {
        this.sign = data;
      }
    },
    /** 上传图片 */
    imageItem() {
      let that = this;
      if (this.sign != null) {
        wx.chooseImage({
          // count: 3 - that.clueLinkmanCard.length, // 最多选择几张图片
          sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            // 支持多图上传
            for (let i = 0; i < res.tempFilePaths.length; i++) {
              // 验证格式
              if (!/.(jpg|jpeg|png|gif)$/i.test(res.tempFilePaths[i])) {
                wx.showToast({
                  title: "图片格式必须是jpeg,jpg,png,gif中的一种",
                  icon: "none"
                });
                return;
              }
              // 显示消息提示框
              wx.showLoading({
                title: "图片上传中...",
                mask: true
              });
              console.log("that.sign", that.sign);
              that.sign &&
                uploadImage(
                  res.tempFilePaths[i],
                  that.sign,
                  function(result) {
                    console.log(result, "rrrrrrrrrr");
                    // 做你具体的业务逻辑操作
                    that.imgList.push(result);
                    setTimeout(() => {
                      that.productOrderUpload();
                    }, 500);
                    console.log("imgList", that.imgList);
                    wx.hideLoading();
                  },
                  function(result) {
                    // 做你具体的业务逻辑操作
                    console.log("uploadfileerro", JSON.stringify(result));
                    wx.showToast({
                      title: "result" + JSON.stringify(result),
                      icon: "none",
                      duration: 6000
                    });
                    // wx.hideLoading();
                  }
                );
            }
          }
        });
      } else {
        this.apiGetOssPlicy();
      }
    }
  }
  // mounted () {
  //   wx.showModal({
  //     content: '\n<p>1</p><p>2</p>',
  //     showCancel: false,
  //     confirmText: '知道了',
  //     confirmColor: '#187798',
  //     success (res) {
  //       if (res.confirm) {
  //         console.log('用户点击确定');
  //       }
  //     }
  //   });
  // },
};
</script>
<style lang="less" scoped>
.productDetail {
  .upImg {
    width: 60px;
    height: 60px;
  }
  .listImg {
    width: 60px;
    height: 60px;
    position: relative;
    margin: 0 9px 5px 0;
  }
  .imgDelete {
    width: 18px;
    height: 14px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .model {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    .modelContent {
      font-size: 15px;
      color: #6b6b6b;
      text-align: center;
      padding: 40px 0 32px;
      border-bottom: 0.5px solid #f0f0f0;
    }
    .modelAlert {
      // margin: 0 auto;
      margin-top: 169px;
      background: #fff;
      border-radius: 8rpx;
    }
    .btn {
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      color: #187798;
    }
  }
  .more {
    padding: 20px 15px;
    .moreProduct {
      text-align: center;
      height: 44px;
      background: rgba(243, 247, 248, 1);
      border-radius: 2px;
      line-height: 44px;
      font-size: 14px;
      color: #187798;
      width: 100%;
      margin-top: 20px;
    }
    .table {
      border: 1px solid #e6e6e6;
      border-radius: 2px;
      .thead {
        height: 42px;
        line-height: 42px;
        background: rgba(233, 241, 243, 1);
        font-size: 13px;
        color: #020604;
      }
      .border_left {
        width: 52px;

        border-right: 1px solid #e6e6e6;
        text-align: center;
      }
      .border_center {
        width: 145px;
        border-right: 1px solid #e6e6e6;
        text-align: center;
      }
      .thbody {
        height: 54px;
        font-size: 13px;
        color: #6b6b6b;
        div {
          height: 100%;
        }
        .num {
          font-size: 14px;
          color: #020604;
          margin-top: 8px;
        }
        .date {
          font-size: 11px;
          color: #909292;
          margin-top: 2px;
        }
        .border_right {
          width: 146px;
          text-align: center;
          justify-content: center;
        }
      }
    }
  }
  .classify {
    width: 35px;
    height: 18px;
    text-align: center;
    background: rgba(24, 119, 152, 1);
    border-radius: 2px;
    font-size: 11px;
    color: rgba(255, 255, 255, 1);
    line-height: 18px;
  }

  .gray {
    width: 375px;
    height: 10px;
    background: rgba(247, 247, 246, 1);
  }
  .info {
    padding: 25px 15px 20px 15px;
    box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
    .incon {
      width: 5px;
      height: 17px;
      background: linear-gradient(
        360deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(53, 181, 175, 1) 100%
      );
      border-radius: 3px;
    }
    .basic {
      font-size: 18px;
      color: #020604;
      margin-left: 10px;
      font-weight: bold;
    }
  }
  .infoLeft {
    font-size: 14px;
    color: #020604;
  }
  .infoRight {
    text-align: right;
    font-size: 14px;
    color: #6b6b6b;
  }
  .detailBg {
    background: url("https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/detailBg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 15px;
    height: 108px;
    .percent {
      color: #f45247;
      font-size: 38px;
    }
    .grade {
      padding: 2px 10px;
      background: #fff;
      border-radius: 2px;
      border: 1px solid rgba(184, 186, 185, 1);
      font-size: 11px;
      color: #909292;
      margin-left: 10px;
    }
    .safe {
      padding: 2px 10px;
      color: #d4a45d;
      font-size: 12px;
      background: rgba(255, 250, 237, 1);
      border-radius: 2px;
      border: 0.5px solid rgba(212, 164, 93, 1);
      justify-content: center;
      align-items: center;
      img {
        margin-left: -3px;
        width: 12px;
        margin-right: 3px;
        height: 12px;
      }
    }
  }
  .standard {
    padding: 0 0 5px 15px;
    font-size: 12px;
    color: #909292;
  }
  .name {
    font-size: 15px;
    color: #020604;
    font-weight: bold;
    margin-left: 10px;
  }
}
</style>